<template>
  	<div class="login-page">
        <div class="bg-over"></div>
	  	<transition name="form-fade" mode="in-out">
	  		<section class="form-contianer">
			     <div class='title-area rflex'>
					<img class="logo" src="@/static/images/logo.png" alt="admin">
					<span class='title'>登 录</span>
				</div>
		    	<el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-form">
					<el-form-item prop="username">
						<el-input prefix-icon="el-icon-user" @keyup.enter.native="submitForm('loginForm')" class="area" type="text" placeholder="用户名" v-model="loginForm.username" ></el-input>
					</el-form-item>
					<el-form-item prop="password"> 
						<el-input prefix-icon="el-icon-lock" @keyup.enter.native="submitForm('loginForm')" class="area" type="password" placeholder="密码" v-model="loginForm.password"></el-input>
					</el-form-item>
					<el-form-item>
				    	<el-button class="submit-btn" type="primary" :loading="loading" @click="submitForm('loginForm')">登录</el-button>
				  	</el-form-item>
				</el-form>
	  		</section>
	  	</transition>
		<footer class="footer">
			<p class="lh">Copyright © 2021 kuang-chi All Rights Reserved.</p>
		</footer>
  	</div>
</template>
<script>
	import { mapActions } from 'vuex';
    import AES from '@/static/external/aes.js';
    import { requestsLogin } from '@/api/index.js'
	export default {
	    data(){
			return {
				loading: false,
				loginForm: {
					username: '',
					password: ''
				},
				rules: {
					username: [
			            { required: true, message: '请输入用户名', trigger: 'blur' }
			        ],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' }
					],
				},
			}
		},
		methods: {
			...mapActions('permission', ['getCurrentUserInfo']),
		    submitForm(loginForm) {
				this.$refs[loginForm].validate((valid) => {
					if (valid) {
						this.loading = true;
                        let username = AES.kcEncrypt(this.loginForm.username);
                        let password = AES.kcEncrypt(this.loginForm.password);
                        requestsLogin({
                            username,
                            password,
                        }).then(res => {
                            this.loading = false;
							this.getCurrentUserInfo((data) => {
								this.$utils.innerRedirect(this.$webConfig.defaultUrl);
							});
                        }).catch(err => {
							this.$message.error(err.data.message);
                            this.loading = false;
                        })
					}
				});
			},
		},
		created() {
			this.getCurrentUserInfo((data) => {
				this.$utils.innerRedirect(this.$webConfig.defaultUrl);
			});
		}
	}
</script>

<style lang="less" scoped>
	.login-page {
		position: absolute;
		width: 100%;
		height: 100%;
		background: url('~@/static/images/bg.jpg') no-repeat center center;
		// background-size: 100% 100%;

		.form-fade-enter-active, .form-fade-leave-active {
			transition: all 1s;
		}
		.form-fade-enter, .form-fade-leave-active {
			transform: translate3d(0, -50px, 0);
			opacity: 0;
		}
        .bg-over {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, .6);
            z-index: 0;
        }

		.footer {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 16px;
			color: #fff;
			text-align: center;

			.lh {
				display: inline-block;
				margin: 0 6px;

				a {
					text-decoration: none;

					&:hover {
						color: #bbb;
					}
				}
			}
		}
	}
	.form-contianer{
		position: absolute;
		top: 45%;
        left: 50%;
		transform: translate(-50%,-50%);
		background: #fff;
		width:370px;
		border-radius: 5px;
		padding: 25px;
		text-align: center;
		.title-area{
			display: flex;
			justify-content: center;
   			align-items: center;
			text-transform: uppercase;
			font-size: 22px;
			width: 100%;
			padding-bottom: 20px;
			.logo{
				width: 40px;
    			margin-right: 10px;
			}
			.title{
				i{
				   color: #409EFF;
				}
			}
		}
	
		.login-form{
			
			.submit-btn{
				width: 100%;
				padding:13px 0;
				font-size: 16px;
			}

			.tiparea{
				text-align:left;
				font-size: 12px;
				color: #909399;
				padding: 10px 0;
				.tip{
					margin-left: 54px;
				}
			}
	    }
	}
</style>
